<template>
  <view class="container" @touchmove.stop.prevent="() => {}">
    <view class="u-nav-slot" slot="left" @click="left">
      <u-icon name="arrow-left" color="#000000" size="24" :bold="true"></u-icon>
    </view>
    <image
      class="bg-c"
      src="../../static/img/bg-c.png"
      mode="aspectFill"
    ></image>
    <view class="sign-up-title-c">
      <image
        class="bg1-l"
        src="../../static/img/left.png"
        mode="aspectFill"
      ></image>
      <image
        class="bg2-2"
        src="../../static/img/right.png"
        mode="aspectFill"
      ></image>
      <view class="sign-up-title-item"> 请选择你的性别 </view>
      <view class="sign-up-title-tips"> 给你推荐优质嘉宾 </view>
    </view>
    <view class="sex-c">
      <view
        :class="['man-btn', { active: selectSex === '男' }]"
        @click="changeSex('男')"
      >
        <image
          class="active-b"
          v-show="selectSex === '男'"
          src="../../static/img/sign-active-b.png"
          mode="widthFix"
        >
        </image>
        <image
          v-show="selectSex !== '男'"
          src="../../static/img/man-t.png"
          mode="widthFix"
        ></image>
        <image
          v-show="selectSex === '男'"
          src="../../static/img/man-t-active.png"
          mode="widthFix"
        ></image>
      </view>
      <view
        :class="['woman-btn', { active: selectSex === '女' }]"
        @click="changeSex('女')"
      >
        <image
          class="active-b"
          v-show="selectSex === '女'"
          src="../../static/img/sign-active-b.png"
          mode="widthFix"
        ></image>
        <image
          v-show="selectSex !== '女'"
          src="../../static/img/woman-t.png"
          mode="widthFix"
        ></image>
        <image
          v-show="selectSex === '女'"
          src="../../static/img/woman-t-active.png"
          mode="widthFix"
        >
        </image>
      </view>
    </view>
    <view class="bottom">
      <view class="to-btn" @click="stepToNext"> 下一步（2/7） </view>
    </view>
  </view>
</template>

<script>
import { addMemberInfo } from "@/api/enroll";
export default {
  data() {
    return {
      bgColor: "rgba(0, 31, 63, 0)",
      img: this.$BASE_URL,
      selectSex: "男",
      obj: {},
    };
  },
  onLoad(options) {},
  methods: {
    left() {
      console.log(11111111111111);
      uni.navigateBack();
    },
    changeSex(val) {
      this.selectSex = val;
    },
    async stepToNext() {
      const personal = uni.getStorageSync("userInfo");
      let obj = {
        id: personal.id,
        nid: personal.nid,
        sex: this.selectSex,
        nickName: personal.nickName,
      };
      const { code } = await addMemberInfo(obj);
      if (code !== 200) return;
      uni.redirectTo({
        url: "/pages/enroll/four",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
}

.bg-c {
  width: 100%;
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
}

.u-nav-slot {
  margin-bottom: 115rpx;
  padding-left: 20rpx;
  z-index: 100;
}

.container {
  position: relative;
  width: 100vw;
  height: 100%;
  padding-top: 66rpx;
}

.sign-up-title-c {
  position: relative;
  width: 500rpx;
  height: 200rpx;
  margin: auto;
  margin-top: 52rpx;
  overflow: hidden;
  color: #333;

  .bg1-l {
    position: absolute;
    top: 0;
    left: 20rpx;
    width: 95rpx;
    height: 85rpx;
  }

  .bg2-2 {
    position: absolute;
    top: 66rpx;
    right: 0;
    width: 83rpx;
    height: 60rpx;
  }

  .sign-up-title-item {
    font-size: 48rpx;
    text-align: center;
    color: rgba(45, 49, 50, 0.9);
    margin-top: 66rpx;
    font-family: "SourceHanSerifCN-Heavy";
  }

  .sign-up-title-tips {
    text-align: center;
    color: #666;
    margin-top: 24rpx;
    font-family: "PingFang SC-Regular, PingFang SC";
    font-size: 24rpx;
    font-weight: 400;
  }
}

.sex-c {
  width: 524rpx;
  margin: auto;
  margin-top: 158rpx;
  display: flex;
  justify-content: space-between;

  & > view {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 226rpx;
    height: 226rpx;
    text-align: center;
    border-radius: 50%;
    background-color: #f3f8fb;
    border: 4rpx solid #f3f8fb;

    image {
      width: 106rpx;
      height: 106rpx;
    }

    &.active {
      border: 4rpx solid #5b83e8;
    }

    .active-b {
      width: 48rpx;
      position: absolute;
      bottom: -24rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.bottom {
  position: fixed;
  bottom: 15vh;
  width: 100%;
}

.to-btn {
  width: 536rpx;
  height: 84rpx;
  background: linear-gradient(86deg, #c2d2f9 0%, #c5c2f3 100%);
  border-radius: 42rpx 42rpx 42rpx 42rpx;
  text-align: center;
  line-height: 84rpx;
  font-family: "PingFang SC-Bold, PingFang SC";
  margin: auto;
  color: rgba(65, 92, 158, 0.8);
  font-weight: 400;
  font-size: 28rpx;
}

.tips {
  margin: auto;
  text-align: center;
  margin-top: 30rpx;
  font-family: "PingFang SC-Regular, PingFang SC";
  font-size: 24rpx;
  font-weight: 400;
  color: #b7b7b7;
}
</style>
